import React, {Component} from 'react';
import { View, Text, Image, StyleSheet, TouchableOpacity } from 'react-native';
import PropTypes from 'prop-types';
import * as Global from '../../style/global';
import CXIcon from '../../style/icon/CXIcon';
import {Actions} from 'react-native-router-flux';



// 公共头部导航
class NavBar extends Component {
    constructor(props) {
        super(props);
        this._navItem = this._navItem.bind(this);
        this.state = {
            currentShop:''
        }
    }

    componentDidMount() {
        storage.load({
            key: 'clerk-info'
        }).then(res => {
            if (res && res.shops) {
                this.setState({
                    currentShop: res.shops
                });
            }
        }).catch(err => {

        });
    }
    // 导航栏item
    _navItem(navItem, onPressItem) {
        if (!navItem) {
            return (
                <View>
                    没有数据
                </View>
            )
        }
        return navItem.map((item, index) => {
            return (
                <TouchableOpacity onPress={() => onPressItem(item, index)} key={index}>
                    <View  style={style.navItem} >
                        <CXIcon name={item.icon} color='#ffffff' style={style.icon}>

                        </CXIcon>
                        <Text style={style.text}>
                            {item.name}
                        </Text>
                    </View>
                </TouchableOpacity>
            )
        })
    }

    _jumpPage() {
        Actions.push('LoginOut');
    }

    render() {
        let { navItem, onPressItem } = this.props;
        return (
            <View style={style.navBar}>
               <View style={style.navLogo}>
                   <Image source={require('../../img/logo.png')}></Image>
               </View>
                <View style={style.navItemBox}>
                    {/*导航栏item*/}
                    {this._navItem(navItem, onPressItem)}
                </View>
                <TouchableOpacity>
                    <View style={style.rightItem}>
                        {/*<CXIcon style={style.icon} name='jiaojieban' color='#ffffff'/>*/}
                        <Text style={style.text}>
                            {/*交接班*/}
                            {this.state.currentShop.name}
                        </Text>
                    </View>
                </TouchableOpacity>
            </View>
        )
    }
}

const style = StyleSheet.create({
    navBar: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingLeft: 30,
        paddingRight: 30,
        height: 60,
        backgroundColor: Global.mainBackgroundColor
    },
    navLogo: {
      marginRight: 40
    },
    navItemBox: {
        flexDirection: 'row',
        flex: 1
    },
    navItem: {
        flexDirection: 'row',
        alignItems: 'center',
        marginRight: 30
    },
    rightItem: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    icon: {
        fontSize: 20,
        marginRight: 5
    },
    text: {
        color: '#fff',
        fontSize: 14
    }
});

const propTypes = {
    navItem: PropTypes.array,
    onPressItem: PropTypes.func
};

NavBar.propTypes = propTypes;


export default NavBar;
